<template>
    <popup
        ref="popupRef"
        width="32%"
        title='物料质检'
        class="bg-page"
        :async="true"
        :showClose="false"
        :showFooter="false"
    >
        
        <el-form ref="formRef" :model="formData" class="mb-12" label-width="150px">
            
            <el-form-item label="售后物料名称" prop="itemName">
                <el-input
                    disabled
                    class="w-80"
                    v-model="formData.itemName"
                />
            </el-form-item>
            
            
            <el-form-item label="售后物料编码" prop="itemCode">
                <el-input
                    disabled
                    class="w-80"
                    v-model="formData.itemCode"
                />
            </el-form-item>
            
            
            <el-form-item label="售后69码" prop="batch">
                
                <el-input
                    disabled
                    class="w-80"
                    v-model="formData.batch"
                />
            
            </el-form-item>
            
            
            <el-form-item label="售后SN" prop="sn">
                <el-input
                    disabled
                    class="w-80"
                    v-model="formData.sn"
                />
            </el-form-item>
            
            <el-form-item label="物料实况" prop="faultCode"
                          :rules="[{required: true, message:'物料实况不可为空',trigger:'change'}]">
                
                <el-cascader
                    class="w-80"
                    placeholder="请选择物料实况"
                    
                    :options="afterSaleOrderConfig.materialSituationConfig"
                    v-model="formData.faultCode"
                    :props="{
                                  value: 'name',
                                  label: 'value',
                                  children: 'children',
                                  expandTrigger: 'hover' }"
                    @change="handleFaultChange"
                />
            
            </el-form-item>
            
            
            <el-form-item label="质检结果" prop="checkResult"
                          :rules="[{required: true, message:'质检结果不可为空',trigger:'change'}]">
                
                <el-select class="w-80" v-model="formData.checkResult"
                           placeholder="请选择质检结果">
                    <el-option v-for="item in AfterSaleOrderCheckEnumList"
                               :label="item.name"
                               :value="item.code"/>
                </el-select>
            
            </el-form-item>
            
            <el-form-item label="不通过原因" prop="checkFaultCode"
                          :rules="[{required: true, message:'不通过原因不可为空',trigger:'change'}]"
                          v-if="formData.checkResult=== AfterSaleOrderCheckEnum.DETECT_FAULT">
                <el-cascader
                    class="w-80"
                    placeholder="请选择物料实况"
                    
                    :options="afterSaleOrderConfig.materialFailureCauseConfig"
                    v-model="formData.checkFaultCode"
                    :props="{
                                  value: 'name',
                                  label: 'value',
                                  children: 'children',
                                  expandTrigger: 'hover' }"
                    @change="handleFailCauseChange"
                />
            </el-form-item>
            
            
            <el-form-item label="描述" prop="description">
                <el-input type="textarea"
                          placeholder="请选择物料描述"
                          class="w-80"
                          v-model="formData.description"
                />
            </el-form-item>
        
        
        </el-form>
        
        <div class=" flex justify-end pr-16">
            <el-button @click="handleClose">
                取消
            </el-button>
            
            <el-button @click="handleConfirm" type="primary">
                确定
            </el-button>
        </div>
    </popup>


</template>

<script lang='ts' setup>


import Popup from "@/components/popup/index.vue";
import {UnwrapNestedRefs} from "@vue/reactivity";
import {AfterSaleItemLineInfoDTO} from "@/api/afterSale/order/dto/AfterSaleItemLineInfoDTO";
import {useAfterSaleEnumManager} from "@/manager/base/AfterSaleEnumManager";
import {useFormatterManager} from "@/manager/base/FormatterManager";
import {checkSaleOrderLineOver} from "@/api/afterSale/order/AfterSaleOrderLineController";
import feedback from "@/utils/feedback";
import {FormInstance} from "element-plus";
import AfterSaleItemMaterialDTO from "@/api/afterSale/order/dto/AfterSaleItemMaterialDTO";
import {AfterSaleOrderCheckEnum, AfterSaleOrderCheckEnumList} from "@/config/enums/aftersale/AfterSaleOrderCheckEnum";

let afterSaleOrderConfig = useAfterSaleEnumManager();
let formatterManager = useFormatterManager(afterSaleOrderConfig);

const popupRef = shallowRef<InstanceType<typeof Popup>>()
const formRef = shallowRef<FormInstance>()

// 定义物料数据
const formData: UnwrapNestedRefs<AfterSaleItemMaterialDTO> = reactive(new AfterSaleItemMaterialDTO())


/**
 * 处理物料实况变化
 *
 * @author 徐寿春
 * 2023/4/12 15:00
 */
function handleFaultChange(value: string[]) {
    const s = formatterManager.computeFormatterWarehouse(value[1])
    if (s && s.length > 0) {
        formData.warehouse = s[0].ext
        formData.fault = s[0].value
    }
    
}

function handleFailCauseChange(value: string[]) {
    const s = formatterManager.computeFormatterFailCause(value[1])
    if (s && s.length > 0) {
        formData.checkFault = s[0].value
    }
}


/**
 * 确认提交
 *
 * @author 徐寿春
 * 2023/4/8 u
 */
async function handleConfirm() {
    await formRef.value?.validate()
    await checkSaleOrderLineOver(formData).then(() =>
        feedback.notifySuccess("物料质检完成")
    )
    popupRef.value.close()
    emit('confirm')
}


/**
 * 弹窗打开 传入当前物料信息
 *
 * @author 徐寿春
 * 2023/5/5 17:25
 */
function open(item: AfterSaleItemLineInfoDTO) {
    for (let key in item.inMaterIalInfo) {
        //@ts-ignore
        formData[key] = item.inMaterIalInfo[key]
    }
    popupRef.value?.open()
}


/**
 *  弹窗关闭
 *
 * @author 徐寿春
 * 2023/4/8 13:28
 */
function handleClose() {
    popupRef.value.close()
    emit('close')
}


const emit = defineEmits(['confirm', 'close'])
defineExpose({
    open
})


</script>

